<template>
	<view>
		<view v-if='content != ""' style='margin:auto'>
			<view v-if='content.video'>
				  <view class="video-container">
				    <video 
				      id="video" 
				      :src="content.video" 
					  :poster="getFirstFrame(content.video)"
				      controls 
				      autoplay="false"
				      object-fit="fill"
					  style='width:100%;height: 100vh;'
				    ></video>
				  </view>
			</view>
			<view v-if='content.content'>
				<u-parse :content="content.content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
			}
		},
		onLoad(options) {
			if (typeof(options.id) !== 'undefined') {
				let token = uni.getStorageSync('api_token')
				if (token == '') {
					this.request.get(`public/contents/${options.id}`).then((res) => {
						console.log(res.data)
						if (res.data.enabled == false) {
							uni.showModal({
								title: '',
								content: '内容不存在！',
								showCancel: false,
								success: () => {

								}
							})
							return
						}
						this.content = res.data
						uni.setNavigationBarTitle({
							title: res.data.title
						})
					})
				} else {
					this.request.get(`api/contents/${options.id}`).then((res) => {
						console.log(res.data)
						if (res.data.enabled == false) {
							uni.showModal({
								title: '',
								content: '内容不存在！',
								showCancel: false,
								success: () => {

								}
							})
							return
						}
						this.content = res.data
						uni.setNavigationBarTitle({
							title: res.data.title
						})
					})
				}
			} else {
				uni.showModal({
					title: '',
					content: '参数错误',
					showCancel: false,
					success: () => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			}
		},
	}
</script>

<style>
	.video-container {
	  width: 100%; /* 容器宽度占满父元素 */
	  position: relative; /* 为绝对定位的子元素提供定位上下文 */
	  overflow: hidden; /* 隐藏超出容器的部分 */
	}
	
	.video-player {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%; /* 宽度占满容器 */
	  height: 100%; /* 高度占满容器 */
	}
</style>